<template>
  <div>
    <div class="top">
      <el-button type="primary" style="margin: 12px;padding:9px">
        <router-link :to="{path:'/demopages'}">
          <i class="el-icon-circle-plus">&nbsp;&nbsp;新增合同</i>
        </router-link>
      </el-button>
      <el-select
        v-model="selectDept"
        size="small"
        v-if="postLevel==1" style="width: 117px;margin-left: 15px;" @change="selectViewableData" value-key="value">
        <el-option v-for=" b in businessOption" :key="b.value" :label="b.label" :value="b.value" ></el-option>
      </el-select>
      <!--          下拉选项-->
      <!--为el-select添加filterable属性即可启用搜索功能。
      默认情况下，Select 会找出所有label属性包含输入值的选项。
      如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。
      filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值-->
      <el-select v-model="typevalue" filterable placeholder="全部合同"  @change="selectInfo" class="select">
        <el-option  label="全部状态" value="0"></el-option>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      &nbsp;&nbsp;  | &nbsp;&nbsp;
      搜索：<el-input v-model="contractName" placeholder="请输入合同编号" @change="selectInfo" suffix-icon="el-icon-search" style="width: 180px"></el-input>
    </div>
    <div class="tab">
    <el-table
      ref="multipleTable"
      :data="contractList"
      tooltip-effect="dark"
      style="width: 100%"
      height="410px"
      @selection-change="handleSelectionChange">
      <el-table-column
        prop="contractTheme"
        label="主题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="customerByCustomId.cusName"
        label="对应客户"
        show-overflow-tooltip>
        <template slot-scope="scope" >
          <el-button type="text" size="small" @click="customerinfo(scope.row)">{{scope.row.customerByCustomId.cusName}}</el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="contractName"
        label="合同编号"
        show-overflow-tooltip>
        <template slot-scope="scope" >
          <el-button type="text" size="small" @click="href(scope.row.contractId)" >{{scope.row.contractName}}</el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="totalAmount"
        label="总金额"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.totalAmount | amountEvent}}
        </template>
      </el-table-column>

      <el-table-column
        prop="receivableAmount"
        label="审批状态"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.contractAppstate==2">
            未审批
          </span>
          <span  v-if="scope.row.contractAppstate==3">
            审批中
          </span>
          <span  v-if="scope.row.contractAppstate==4">
            审批通过
          </span>
          <span  v-if="scope.row.contractAppstate==5">
            审批否决
          </span>
        </template>
      </el-table-column>


      <el-table-column
        prop="empId8.empName"
        label="所有者"
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column
        prop="effectTime"
        label="开始时间"
        sortable
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column
        prop="operation"
        label="操作"
        show-overflow-tooltip>
        <template slot-scope="scope" >
          <a href="" title="编辑">
            <i class="el-icon-edit"></i>
          </a>
          <a  title="视图">
            <i class="el-icon-tickets" @click="href(scope.row.contractId)"></i>
          </a>
        </template>
      </el-table-column>
    </el-table>

      <div class="page">
        <el-pagination  @size-change="handleSizeChange1"  @current-change="changePage1" :current-page.sync="currentPage1"
                        :page-sizes="pageSizes1" layout="total, sizes, prev, pager, next, jumper"
                        :total="totalSize1" style="float: right;margin-top: 10px;">
        </el-pagination>

        </div>
    </div>
    </div>
</template>

<script>
  import {amountToStr, formatTimeToStr} from '../assets/format'
  import TemplateVue from './homepage/TemplateVue'
  export default {
	name: 'SaContractPage',
    components: {TemplateVue},
    data(){
	    return{
        currentPage1:1,//当前页
        pageSizes1:[10, 20, 25],//可选择的页大小
        totalSize1:0,//总页数
        //合同类型
        typevalue:'0',
        //类型数据
        options:[
          {
            value:'2',
            label:'未审批'
          },{
            value:'3',
            label:'审批中'
          },{
            value:'4',
            label:'同意'
          },{
            value:'5',
            label:'否决'
          },
        ],
        //合同名称
        contractName:'',
        //合同数据
        contractList:[],
        //分页
        totalSize:0,
        pageSize:0,
        currentPage:1,
        userInfo:{
          employeesId:0,//员工id
          empName:''//员工名称
        },
        businessOption: [
          {
            value: 1,
            label: '我的合同'
          },
          {
            value: 2,
            label: '下属合同'
          }
        ],
        postLevel: '',
        deptId: '',//记录部门id
        selectDept: 1,
      }
    },
    created:function(){
      this.userInfo=JSON.parse(sessionStorage.getItem('user'));
      this.authentication();
      this.pageSize = this.pageSizes1[0];
	    this.selectViewableData()
    },
    methods:{
      selectViewableData(){
        if (this.selectDept == 1) {//查看自己的商机
          this.title = '我的合同';
          this.initData(
            this.currentPage,
            this.pageSize,this.value,
            this.contractName,
            this.userInfo.employeesId,
            -1);

        } else if (this.selectDept == 2) {//查看下属商机
          this.title = '下属合同';
          this.initData(
            this.currentPage,
            this.pageSize,this.value,
            this.contractName,
            -1,
            this.deptId);
        } else if (this.selectDept == 3) {//查看全部商机
          this.title = '全部合同';
          this.initData(
            this.currentPage,
            this.pageSize,this.value,
            this.contractName,
            -1,
            -1);
        }
      },
      //验证用户身份
      authentication() {
        var id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
        //获取用户是否是一级角色
        this.$axios.get("http://localhost:8088/is_one_Role",
          {
            params: {
              empId: id
            }
          }).then(v => {
          if (v.data.postLevel == 1) {//用户是一级角色
            //查询出能看到的部门信息
            if (v.data.deptId == 1) {
              this.businessOption.push({value: 3, label: '全部合同'});
            }
            this.postLevel = 1;
          }
          this.deptId = v.data.deptId;//记录部门id
        }).catch();
      },
	    //初始化
      initData(currentPage,pageSize,value,contractName,empId,deptId){
	      this.$axios.get("http://localhost:8088/contract_info",
          {params:{page:currentPage,size:pageSize,type:value,name:contractName,empId:empId,deptId:deptId}}).then(v=>{
	        this.contractList=v.data.rows;
	        this.totalSize1=v.data.toorder_contrtal;
        }).catch()
      },
      //客户跳转
      customerinfo(rowInfo){
        this.$router.push({
          path: '/customerview',
          query: {
            customId:rowInfo.customerByCustomId.customId
          }
        })
      },
      handleSizeChange1(val){
        this.page(1,val,this.value);
      },

      changePage1(val){
        this.page(val,this.pageSize);
      },

      page(currentPage,pageSize){
        if (this.selectDept == 1) {//查看自己的商机
          this.initData(
           currentPage,
           pageSize,
            this.value,
            this.contractName,
            this.userInfo.employeesId,
            -1);

        } else if (this.selectDept == 2) {//查看下属商机
          this.initData(
           currentPage,
           pageSize,this.value,
            this.contractName,
            -1,
            this.deptId);
        } else if (this.selectDept == 3) {//查看全部商机
          this.initData(
           currentPage,
           pageSize,this.value,
            this.contractName,
            -1,
            -1);
        }
      },
      //分页处理
      changePage(page){
        this.$message(this.page);
        this.initData(page,this.pageSize,this.value,this.contractName,this.userInfo.employeesId,this.deptId);
      },

      //合同类型选中值发生变化时触发
      selectInfo(){
        if(this.typevalue==null||this.contractName==null){
          this.initData(this.currentPage,this.pageSize,this.typevalue,this.contractName,this.userInfo.employeesId,-1);
        }else {
          this.initData(this.currentPage,this.pageSize,this.typevalue,this.contractName,this.userInfo.employeesId,-1);
        }
      },
      //合同详情跳转
      href(contractid){
        this.$router.push({path:'contrantview', query: {key:contractid}})
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        this.initData(1,val,this.value,this.contractName,this.userInfo.employeesId);
      },
      handleCurrentChange(val) {
      }
    },
    filters:{
      amountEvent:function(val){
        return amountToStr(val);
      },
    }
  }
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white
  }
  .select{
    padding:10px;
    width: 150px;
    margin-left: 460px;
  }

  .tab{
    background: white;
  }

  .page{
    margin-top:10px;
    float: right;
    border:0px solid red;
    margin-right: 20px;
  }

</style>
